<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div style="padding-top:5px;">
	<a class='myBtn roundBorder' onclick="addProject()">添加实验项目</a>
	<table class="commonTable" id='projectTable'>
		<thead>
			<tr>
				<th>项目编号</th><th>项目名称</th><th>学时</th>
				<th>每组人数</th><th>所属课程</th><th>操作</th>
			</tr>
		</thead> 
		<tbody>
	 		<c:forEach items="${projectList}" var="project">
	 			<tr id="labproject${project.id}">
	 				<td>${project.projectNO}</td>
	 				<td>${project.projectName}</td>
	 				<td>${project.hour}</td>
	 				<td>${project.groupPeopleCount }</td>
	 				<td></td> 
	 				<td>
	 					<a href='javascript:void(0)' onclick='modlabproject("${project.id}")'>修改</a>&nbsp;
						<a href='javascript:void(0)' onclick='deletelabproject("${project.id}")'>删除</a>
					</td>
	 			</tr>
	 		</c:forEach>
		</tbody>
	</table> 
</div>
<script>
	var projectList = new Array(); //新增或者修改的项目列表
	var deleteprojectList = new Array(); //删除的项目列表
	var projectCount = 0;
	function addProject(staffId){
		
		var url = "expCenterTabController.do?projectTabEdit";
		if(staffId != undefined && staffId.length >10){
			url += "&id="+staffId;
		}

		$.dialog({
			  	id:'xxx',
				content: 'url:'+url,
				lock : true,
				zIndex: getzIndex(), 
				parent:frameElement.api,
				width:480,
				height:350,
				title:'添加项目', 
				opacity : 0.3,
				cache:false,
			    ok: function(){
			    	iframe = this.iframe.contentWindow;
			    	var staff = iframe.getProject();
			    	if(staff == null) return false;
			    	handleAddProject(staff);
			    },
			    cancelVal: '关闭',
			    cancel: true /*为true等价于function(){}*/
		});
	}
	
	function handleAddProject(staff){
		console.log('准备添加项目'+staff)
		var index = isprojectListExist(staff.id);
		if(index != -1){ //更新 替换
			projectList[index] = staff;
			
		}else{ //新增

			if(id.length < 10){id=projectCount;}
			projectList[projectCount] = staff;
	 		projectCount++;
		}
		
		updateProjectTableRow(staff); 
		
	}
	
	//修改（新增）员工后，table中更新记录
	function updateProjectTableRow(staff){
		var id = staff.id;
 		
		if($('#labproject'+staff.id).length > 0){
			$('#labproject'+staff.id).html('');
		}else{
			$('#projectTable tbody').append("<tr id='labproject"+id+"'></tr>");
		}
		
		//添加一行
		$('#labproject'+staff.id).append("<td>"+staff.projectNO+"</td>"+
		"<td>"+staff.projectName+"</td>"+ 
		"<td>"+staff.hour+"</td>"+
		"<td>"+staff.groupPeopleCount+"</td>"+ 
		"<td></td>"+
		"<td><a href='javascript:void(0)' onclick='modlabproject(\""+id+"\")'>修改</a>&nbsp;"+
		"<a href='javascript:void(0)' onclick='deletelabproject(\""+id+"\")'>删除</a></td>");
	} 
	
	
	function deletelabproject(id){
		$('#labproject'+id).remove();
		for(var i =0;i<projectList.length;i++){
			if(projectList[i] != null && projectList[i].id == id){
				projectList[i] = null;
			}
		}
		
		if(id.length > 10){ //非临时id，才保存，传给服务器删除
			deleteprojectList.push(id);
		}
		
	}
	
	var currentModProject;
	function modlabproject(id){
		if(id.length < 10){ //id长度小于10位表示是临时id
			currentModDevice = getProjectFromList(id) ; 
		}else{
			currentModDevice = {id:id};	
		}
		 
 		
		addProject(id);
	}
	
	function getProjectFromList(id){
		for(var i =0;i<projectList.length;i++){
			if(projectList[i] != null && projectList[i].id == id){
				return projectList[i];
			}
		}
		return null;
	}
	
	/**
	* 判断员工修改新增数组中是否存在此条记录
	*/
	function isprojectListExist(id){
		for(var i =0;i<projectList.length;i++){
			if(projectList[i] != null && projectList[i].id == id){
				return i;
			}
		}
		return -1;
	}
</script>

<style>

</style>